<template>
  <div class="cart-item">
    <div class="item-image">
      <img :src="item.image" :alt="item.name" />
    </div>

    <div class="item-info">
      <h4 class="item-name">{{ item.name }}</h4>
      <p class="item-price">¥{{ item.price }}</p>
    </div>

    <div class="item-quantity">
      <button
        @click="updateQuantity(item.id, item.quantity - 1)"
        :disabled="item.quantity <= 1"
        class="quantity-btn"
      >
        -
      </button>
      <span class="quantity-display">{{ item.quantity }}</span>
      <button @click="updateQuantity(item.id, item.quantity + 1)" class="quantity-btn">+</button>
    </div>

    <div class="item-total">¥{{ (item.price * item.quantity).toFixed(2) }}</div>

    <button @click="removeItem(item.id)" class="remove-btn">删除</button>
  </div>
</template>

<script setup lang="ts">
import { useCartStore } from '@/stores/cart'
import type { CartItemProps } from '@/types/storeType'
defineProps<{
  item: CartItemProps
}>()

const { updateQuantity, removeItem } = useCartStore()
</script>

<style scoped>
.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: white;
}

.item-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.item-name {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #333;
}

.item-price {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.item-quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.quantity-btn:hover:not(:disabled) {
  background: #f8f9fa;
}

.quantity-btn:disabled {
  background: #f8f9fa;
  color: #ccc;
  cursor: not-allowed;
}

.quantity-display {
  min-width: 30px;
  text-align: center;
  font-weight: bold;
}

.item-total {
  font-weight: bold;
  color: #e74c3c;
  font-size: 1.1rem;
}

.remove-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: #dc3545;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.remove-btn:hover {
  background: #c82333;
}

@media (max-width: 768px) {
  .cart-item {
    grid-template-columns: 60px 1fr;
    gap: 0.5rem;
  }

  .item-quantity,
  .item-total,
  .remove-btn {
    grid-column: 2;
  }

  .item-image img {
    width: 60px;
    height: 60px;
  }
}
</style>
